<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="root">
    <input type="text">
    <div></div>
</div>
</body>
<script>
    // 1- 数据状态的更改需要通过defineProperty进行劫持
    // 2- 劫持后可以更新与该数据相关的DOM中的属性。（发布者）
    // 3- 与数据状态相关联的元素，均是订阅者
    // 4- 订阅者与发布者的关系是多对一的。
    // 5- 每一个数据状态会对应多个订阅者。
    // observe:对数据进行观察,数据发生变化会通知订阅者。
    // watcher：生成订阅者
    // compile：对模板进行编译，在编译的过程中会通过watcher创建订阅者

    const root = document.querySelector("#root");
    const input = root.querySelector("input");
    const div = root.querySelector("div");
    const state = {
        str: "今天天气不错！"
    }
    let str = state.str;
    Object.defineProperty(state, "str", {
        get() {
            return str;
        },
        set(v) {
            str = v;
            div.innerHTML = input.value = str;
        }
    })
    input.oninput = function(){
        div.innerHTML = state.str =  this.value;
    }
    input.value = div.innerHTML = state.str;

</script>
</html>